import { createRouter, createWebHistory } from 'vue-router'
import { renderIcon } from '@/utils/index'
import { Home, ExtensionPuzzle, Paw } from '@vicons/ionicons5'
import { createRouterGuards } from './router-guards'

const Layout = () => import('@/layout/index.vue')

// const ErrorPage = () => import('@/views/error/404.vue')

// 普通路由无需权限验证
export const constantRouter = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: 'Login',
      hidden: true,
    },
  },
]

// 权限路由需要验证
export const asyncRoutes = [
  // {
  //   path: '/login',
  //   name: 'Login',
  //   component: () => import('@/views/login/index.vue')
  // },
  {
    path: '/',
    name: 'Root',
    redirect: '/home/index',
    meta: { hidden: true },
  },
  {
    path: '/home',
    redirect: '/home/index',
    name: 'Home',
    component: Layout,
    meta: {
      title: '首页',
      icon: renderIcon(Home),
    },
    children: [
      {
        path: 'index',
        component: () => import('@/views/home/index.vue'),
        name: 'home_index',
        meta: {
          title: '首页',
          affix: true,
        },
      },
    ],
  },
  {
    path: '/demo',
    component: Layout,
    name: 'Demo',
    redirect: '/demo/table',
    meta: {
      title: '组件示例',
      icon: renderIcon(Paw),
    },
    children: [
      {
        path: 'table',
        component: () => import('@/views/demo/table.vue'),
        name: 'Table',
        meta: {
          title: '表格',
        },
      },
      {
        path: 'chart',
        component: () => import('@/views/demo/chart.vue'),
        name: 'Chart',
        meta: {
          title: '地图',
        },
      },
      {
        path: 'swiper',
        component: () => import('@/views/demo/swiper.vue'),
        name: 'Swiper',
        meta: {
          title: '手写轮播',
        },
      },
      {
        path: 'animation',
        component: () => import('@/views/demo/animation.vue'),
        name: 'Animation',
        meta: {
          title: '开关灯',
        },
      },
      {
        path: 'tailwind',
        component: () => import('@/views/demo/tailwind.vue'),
        name: 'Tailwind',
        meta: {
          title: 'Tailwind',
        },
      },
    ],
  },
  {
    path: '/about',
    component: Layout,
    name: 'About',
    redirect: '/about/project',
    meta: {
      title: '关于',
      icon: renderIcon(ExtensionPuzzle),
    },
    children: [
      {
        path: 'project',
        component: () => import('@/views/about/index.vue'),
        name: 'about_project',
        meta: {
          title: '关于项目',
        },
      },
      {
        path: 'author',
        component: () => import('@/views/about/author.vue'),
        name: 'about_author',
        meta: {
          title: '关于作者',
        },
      },
    ],
  },
]

const routes = [...constantRouter, ...asyncRoutes]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior: () => ({
    x: 0,
    y: 0,
  }),
})

createRouterGuards(router)

export default router
